<template>
  <el-container>
    <el-header>
      <div class="h-logo">Header</div>
      <div class="h-right">
        <el-button type="text">首页</el-button>
        <img v-if="userImg" :src="userImg" alt="头像" />
        <el-button type="text" v-if="username">{{
          username + "，" + holloWord
        }}</el-button>
        <el-button v-if="username" type="text" @click="deLogin">退出</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-col>
          <el-menu
            class="el-menu-vertical-demo"
            router
            default-active="/admin/users/personal"
            background-color="#697179"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <!-- 使用具名插槽 -->
            <el-submenu index="">
              <template #title>
                <i class="el-icon-location"></i>
                <span>个人中心</span>
              </template>
              <el-menu-item index="/admin/users/personal"
                >个人资料</el-menu-item
              >
              <el-menu-item index="/admin/users/password"
                >修改密码</el-menu-item
              >
            </el-submenu>
            <el-submenu index="/admin/article">
              <template #title>
                <i class="el-icon-menu"></i>
                <span>文章管理</span>
              </template>
              <el-menu-item index="/admin/article/add">发布文章</el-menu-item>
              <el-menu-item index="/admin/article/list">文章列表</el-menu-item>
            </el-submenu>
            <el-menu-item index="/admin/comment">
              <template #title>
                <i class="el-icon-document"></i>
                <span>评论管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/admin/fans">
              <template #title>
                <i class="el-icon-setting"></i>
                <span>粉丝管理</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  computed: {
    userImg() {
      return this.$store.state.user.avatar;
    },
    username() {
      return this.$store.state.user.username;
    },
    holloWord() {//🌟
      const time = new Date().getHours();
      return time > 3
        ? time > 5
          ? time > 8
            ? time > 11
              ? time > 13
                ? time > 18
                  ? time > 22
                    ? "夜深了！"
                    : "晚上好！"
                  : "下午好！"
                : "午安！"
              : "上午好！"
            : "早上好！"
          : "凌晨了！"
        : "夜深了！";
    },
  },
  methods: {
    deLogin() {
      document.cookie =
        "user=; expires=" + new Date(Date.now() - 24 * 3600 * 1000);
      location.pathname = "/login";
    },
  },
  created() {
    try {
      // const user = JSON.parse(document.cookie.split('=')[1])
      const user = JSON.parse(document.cookie.match(/user=\{(.*?)\}/)[0].split("=")[1]);
      if (!user.token) location.pathname = "/login";
      this.$message.success("登录成功!");
    } catch (error) {
      console.error(error);
    }
  },
};
</script>

<style>
.el-button {
  color: rgb(255, 236, 236);
}
.el-aside {
  background-color: #697179;
}
.el-aside li {
  width: 200px;
}
.el-container {
  height: 100%;
}
.el-header {
  background-color: #545c64;
  color: #fff;
  line-height: 60px;
}
.h-logo {
  float: left;
  font-weight: lighter;
  font-size: 35px;
}
.h-right span {
  margin-right: 6px;
}

.h-right img {
  display: inline-block;
  vertical-align: middle;
  margin: 0 8px;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: #fff;
}
.h-right {
  float: right;
}
.el-main {
  background-color: rgb(249, 249, 249);
}
</style>